<template>
    <panelHead :route="route"/>
    <div class="btn" style="margin-top:3vh ;">
        <el-button type="primary" plain @click="open(null)">
            <el-icon>
                <Plus />
            </el-icon>
            <p>新增</p>
        </el-button>

        <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF" title="Are you sure to delete this?"
            @cancel="onCancel">
            <template #reference>
                <el-button type="danger" plain><el-icon>
                        <Delete />
                    </el-icon>
                    <p>删除</p>
                </el-button>
            </template>
            <template #actions="{ confirm, cancel }">
                <el-button size="small" @click="cancel">cancel</el-button>
                <el-button type="danger" size="small" @click="confirmDelete">just fuking delete!</el-button>
            </template>
        </el-popconfirm>
    </div>
    <el-table :data="tableData.list" stripe style="width: 100%" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="id" width="100px" v-if="false" />
        <el-table-column prop="name" label="昵称" width="100px" />
        <el-table-column prop="mobile" label="手机号" width="120px" />
        <el-table-column label="创建时间">
            <template #default="scope">
                <div style="display:flex;line-height:100%;">
                    <el-icon>
                        <Clock />
                    </el-icon>
                    <span style="margin-left:10px;">{{ scope.row.create_time }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="95px">
            <template #default="scope">
                <el-tag :type="scope.row.active ? 'success' : 'danger'">{{ scope.row.active ? '正常' : '失效'
                    }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="头像">
            <template #default="scope">
                <img :src="scope.row.avatar" style="width: 45px; height: 45px" alt="图片加载失败"></img>
            </template>
        </el-table-column>
        <el-table-column label="性别">
            <template #default="scope">
                <p :src="scope.row.sex" alt="图片加载失败"></p>{{ scope.row.sex == 1 ? '男' : '女' }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="open(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="paginationData.pageNum" :page-size="paginationData.pageSize"
        :background="background" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!--对话框-->
    <el-dialog v-model="dialogTableVisible" title="陪护师" width="800" :before-close="handleClose">
        <!--对话框内容-->
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
            <el-form-item v-show="false" prop="id">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <el-button v-if="!form.avatar" type="primary" @click="dialogImgVisible = true">点击上传</el-button>
                <img v-else @click="dialogImgVisible = true" :src="form.avatar" style="width: 100px; height: 100px"
                    alt="图片加载失败"></img>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input-number v-model="form.age" :min="1" :max="1000" @change="handleChange" />
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入您的手机号码"></el-input>
            </el-form-item>
            <el-form-item label="是否生效" prop="active">
                <el-radio-group v-model="form.active">
                    <el-radio :value="1">生效</el-radio>
                    <el-radio :value="0">失效</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirm(formRef)">确认</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogImgVisible" width="600px">
        <div class="image-list">
            <div v-for="(item, index) in fileList" :key="item.name" class="img-box" @click="selectIndex = index">
                <div v-if="selectIndex === index" class="select">
                    <el-icon color="#fff">
                        <Check></Check>
                    </el-icon>
                </div>
                <img :src="item.url" alt="图片加载失败" style="width: 148px; height: 148px;margin: 5px;">
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirmImage()">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { photoList, Companion, companionList, companionDelete } from '../../../api/index';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { useRoute } from 'vue-router';

const route = useRoute();

const fileList = ref([]);

const tableData = reactive({
    list: [],
    total: 0
});

const paginationData = reactive({
    pageNum: 1,
    pageSize: 10
});

onMounted(() => {
    photoList().then(res => {
        fileList.value = res.data.data;
        console.log(fileList.value);
    })
    companionList(paginationData).then(res => {
        console.log(res.data);
        tableData.list = res.data.data.list;
        tableData.total = res.data.data.total;
        tableData.list.forEach(item => {
            item.create_time = dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss');
        })
    })
});

/*
    @1.弹窗的状态
    @2.弹窗关闭前的回调
    @3.开启弹窗的函数
*/
const dialogTableVisible = ref(false);// 对话框状态

const handleClose = () => {// 对话框关闭前的回调
    dialogTableVisible.value = false;
}

const open = (rowData = {}) => {// 开启弹窗的函数
    dialogTableVisible.value = true;
    if (rowData) {
        nextTick(() => {
            Object.assign(form, rowData);
        })
    } else {
        formRef.value.resetFields();
    }

}
/*
    @1.表单验证
    @2.表单数据
    @3.表单实例
    @4.增加年龄的监听事件
    @5.提交表单
*/
const rules = reactive({
    name: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
    ],
    avatar: [
        { required: true, message: '请选择头像' },
    ],
    sex: [
        { required: true, message: '请输入性别', trigger: 'change' },
    ],
    age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
    ]
});// 表单验证

const form = reactive({// 表单数据
    id: '',
    mobile: '',
    active: 1,
    age: 28,
    avatar: '',
    name: '',
    sex: '1'
});

const formRef = ref(); // 表单实例


const handleChange = () => { //增加年龄的监听事件
}

const confirm = async (formRef) => { //提交表单
    if (!formRef) return;
    await formRef.validate((valid) => {
        if (valid) {
            Companion(form).then(res => {
                console.log(res, 'Companion');
                if (res.data.code == 10000) {
                    ElMessage.success(res.data.message);
                    formRef.resetFields();
                } else {
                    ElMessage.error(res.data.message);
                }
            })
            dialogTableVisible.value = false;
        }
    });
}

const dialogImgVisible = ref(false);

const selectIndex = ref(0);

const confirmImage = () => {
    dialogImgVisible.value = false;
    form.avatar = fileList.value[selectIndex.value].url;
}

const handleSizeChange = (pageSize) => {
    paginationData.pageSize = pageSize;
    companionList(paginationData).then(res => {
        console.log(res.data);
        tableData.list = res.data.data.list;
        tableData.total = res.data.data.total;
        tableData.list.forEach(item => {
            item.create_time = dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss');
        })
    })
}

const handleCurrentChange = (pageNum) => {
    paginationData.pageNum = pageNum;
    companionList(paginationData).then(res => {
        console.log(res.data);
        tableData.list = res.data.data.list;
        tableData.total = res.data.data.total;
        tableData.list.forEach(item => {
            item.create_time = dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss');
        })
    })
}

const selectTableData = ref([]);

const handleSelectionChange = (val) => {
    selectTableData.value = val

    console.log(val);
}

const confirmDelete = () => {
    companionDelete({ id: selectTableData.value }).then(res => {
        if (res.data.code == 10000) {
            ElMessage.success(res.data.message);
            location.reload();
        } else {
            ElMessage.error(res.data.message);
        }
    })
}
</script>

<style lang="less" scoped>
p {
    margin-left: 5px;
}

.el-pagination {
    margin-top: 25px;
}

.btns {
    padding: 10px 0 10px 10px;
    background-color: #fff;
}

.image-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .img-box {
        position: relative;

        .select {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 24px;
            height: 24px;
            background-color: #67c23a;
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .el-image {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
</style>